import './index.less';

import React from "react";
import { componentClass, ComponentProps } from "../../../../common/Component";
import { setAttribute } from '../../../../common/Widget';


const refs = []
setAttribute("refs", refs);

export function Ref(props: React.PropsWithChildren<ComponentProps>){
    //把文本暂存
    refs.push(props.children);
    let id = refs.length;

    return <sup id={'ref-' + id} className={componentClass(props, 'apps-markdown-ref')}>
        <a href={'#refs-' + id}>
            {refs.length}
        </a>
    </sup>
}


export function Refs(props: React.PropsWithChildren<ComponentProps>){
    if (refs.length == 0){
        return null;
    }

    return <div className={componentClass(props, 'apps-markdown-refs')}>
        <section className="footnotes">
            <h2 id="footnote-label" className="sr-only">Footnotes</h2>
            <ol dir="auto">
                {
                    refs.map((item, index)=> <li key={index} id={'refs-' + (index + 1)}>
                        <p dir="auto"> {item}<a href={"#ref-" + (index + 1)} className="data-footnote-backref">↵</a></p>
                    </li> )
                }
            </ol>
        </section>
    </div>
}


export function Cite(props: React.PropsWithChildren<ComponentProps>){
    return <blockquote className={componentClass(props, 'apps-markdown-cite')}>
    {props.children}
    </blockquote>
}